<!--
  Background page
  Author: Chaitanya Gharpure (chaitanyag@google.com)
  YouTube Access
-->

<html>
<head>
<script type="text/javascript">

var storeVideoId;

chrome.extension.onConnect.addListener(function(p) {
  p.onMessage.addListener(function(msg) {
    if (msg.cmd == 'overlay') {
      p.postMessage({overlay: document.getElementById('overlay').innerHTML});
    } else if (msg.cmd == 'search') {
      getResults(msg.value, p);
    } else if (msg.cmd == 'storeId') {
      storeVideoId = msg.videoid;
    } else if (msg.cmd == 'checkStore') {
      if (storeVideoId) {
        getVideoInfo(storeVideoId, p);
        storeVideoId = null;
      }
    }
  });
});

// Get search results using YouTube GData API.
// http://code.google.com/apis/youtube/2.0/reference.html#Searching_for_videos
function getResults(query, port) {
  var url = 'http://gdata.youtube.com/feeds/api/videos?q=' +
      escape(query) + '&start-index=1' +
      '&max-results=30&alt=json&v=2';
  executeXmlHttpRequest(url, function(req) {
        // Send back search results to the content script
        port.postMessage({searchResult: req.responseText});
      });
}

function getVideoInfo(id, port) {
  var url = 'http://gdata.youtube.com/feeds/api/videos/' + id + '?alt=json';
  executeXmlHttpRequest(url, function(req) {
        var infoObj = eval('(' + req.responseText + ')');
        infoObj.id = id;
        port.postMessage({storeVideo: infoObj});
      });
}

function executeXmlHttpRequest(url, callback) {
  var req = false;
  if (window.XMLHttpRequest) {
      req = new XMLHttpRequest();
  } else {
    return;
  }
  req.onreadystatechange = function() {
    if(req.readyState == 4 && req.status == 200) {
      callback(req);
    } 
  };
  req.open('GET', url, true);
  req.send(null);
}

</script>
</head>
<body>
  <div id="overlay">
    <div tabindex="-1" id="bg" class="yt_bg">
      <table width="100%">
        <tr>
        <td class="yt_cell" align="center">

        <table cellspacing="5" class="yt_bg_cell">
          <tr>
            <td class="yt_cell">
              <input type="text" id="query" value="" class="yt_query_text"/>
            </td>
          </tr>
          <tr>
            <td class="yt_cell">
              <div id="videoDiv"></div><p>
            </td>
          </tr>
          <tr>
            <td class="yt_cell">
              <table class="yt_currplay_table">
              <tr colspan="2">
                <td class="yt_cell yt_currplay_title">PLAYING</td>
              </tr>
              <tr>
                <td width="25%" class="yt_inner_cell"><img id="curr_video_image"/></td>
                <td class="yt_inner_cell">
                  <div id="curr_video_time" class="yt_info_text"></div>
                  <div id="curr_video_info" class="yt_info_text"></div>
                </td>
              </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td class="yt_cell">
              <table class="yt_result_table">
              <tr colspan="2">
                <td class="yt_cell yt_result_title">RESULTS</td>
              </tr>
              <tr>
                <td width="25%" class="yt_inner_cell"><img id="video_image"/></td>
                <td class="yt_inner_cell">
                  <div id="video_time" class="yt_info_text"></div>
                  <div id="video_info" class="yt_info_text"></div>
                </td>
              </tr></table>
            </td>
          </tr>
        </table>

        </td>
      </tr>
    </table>

    </div>
  </div>
</body>
</html>